<template>
    <div style="height:100%;width:100%;">
        <div class="barCanvas" style="height:100%;width:100%;"></div>
    </div>
</template>

<script>
export default {
    name: "bar",
    data() {
        return {
            pieData: [],
            area: ""
        };
    },
    props: {
        barData: {
            type: Array,
            default: () => {
                return {};
            }
        },
        areaName: {
            type: String
        }
    },
    watch: {
        barData(val) {
            console.log(val);
            this.getBar(val);
        }
    },
    // mounted() {
    //    this.getBar(this.pieData,this.area)
    // },
    methods: {
        getBar(pieData, area) {
            let dataList = [];
            pieData[0].map((item, index) => {
                let obj = {};
                obj["name"] = item.areaName;
                obj["value"] = item.thisYearLj;
                dataList.push(obj);
            });
            const that = this;
            var myChart = this.$echarts.init(
                document.querySelector(".barCanvas")
            );
            let option = {
                tooltip: {
                    trigger: "item",
                    formatter: "{a} <br/>{b}: {c}万元"
                },
                series: [
                    {
                        name: "区域",
                        type: "pie",
                        selectedMode: "single",
                        hoverAnimation: false,
                        radius: [0, "30%"],
                        label: {
                            position: "center",
                            color: "#000"
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            {
                                value: pieData[2].thisYearLj,
                                name:
                                    pieData[1] +
                                    "\n" +
                                    pieData[2].thisYearLj +
                                    "万元",
                                tooltip: {
                                    show: false
                                }
                            }
                        ],
                        selectedMode: false,

                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: "rgba(0, 0, 0, 0.5)"
                            },
                            normal: {
                                color: function(params) {
                                    //自定义颜色
                                    var colorList = ["#fff"];
                                    return colorList[params.dataIndex];
                                }
                            },
                            emphasis: {
                                color: "#fff"
                            }
                        }
                    },
                    {
                        name: "区域",
                        type: "pie",
                        radius: ["40%", "55%"],
                        label: {
                            show: false,
                            position: "center"
                        },
                        data: dataList,

                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: "rgba(0, 0, 0, 0.5)"
                            },
                            normal: {
                                color: function(params) {
                                    //自定义颜色
                                    var colorList = [
                                        "#7f92f7",
                                        "#7ba5f4",
                                        "#69bdfb",
                                        "#61d1eb",
                                        "#53dda3",
                                        "#29aa74",
                                        "#6edd53",
                                        "#9ef90c",
                                        "#d2dd53",
                                        "#eadf55",
                                        "#f4c178",
                                        "#f48892"
                                    ];
                                    return colorList[params.dataIndex];
                                }
                            }
                        }
                    }
                ]
            };
            myChart.setOption(option);
        }
    }
};
</script>

<style></style>
